<template>
  <div class="index-container">
    <el-form :inline="true" >
      <el-form-item label="店铺名称">
        <el-input v-model="queryForm.shopName" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="queryForm.status" placeholder="请选择">
          <el-option
            v-for="item in shopStatusData"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="校区">
        <el-select v-model="queryForm.schoolId" clearable placeholder="请选择">
          <el-option
            v-for="item in schoolData"
            :disabled="item.status != 2"
            :key="item.schoolId"
            :label="item.schoolName"
            :value="item.schoolId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-search"
          type="primary" @click="initList">
          查询
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      ref="tableSort"
      :data="list">
      <el-table-column prop="imgUrl" label="商店图片">
        <template #default="{ row }">
           <viewer>
            <img
            :src="row.imgUrl"
            style="width:60px;"
          ></img>
          </viewer>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="商店名" prop="name"/>
      <el-table-column show-overflow-tooltip label="商店地址" prop="location"/>
      <el-table-column show-overflow-tooltip label="是否营业" prop="isOpen">
        <template #default="{ row }">
          <el-tag size="small">{{row.isOpen == 1 ? '是':'否'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="所属校区" prop="schoolId" :formatter="formatSchoolID"/>
      <el-table-column show-overflow-tooltip label="商店状态" prop="status" :formatter="formatstatus" />
      <el-table-column show-overflow-tooltip label="商店当前状态原因" prop="reason" />
      <el-table-column show-overflow-tooltip label="开始营业时间" prop="startTime"/>
      <el-table-column show-overflow-tooltip label="结束营业时间" prop="endTime"/>
      <el-table-column show-overflow-tooltip label="店铺描述" prop="selfExpression"/>
      <el-table-column label="操作" width="220px">
        <template #default="{ row }">
          <el-button type="text" v-if="row.status >= 6" @click="statusClick(row)">状态变更</el-button>
          <el-button type="text" @click="detailClick(row)">店铺详情</el-button>
          <el-button type="text" v-if="row.status === 4" @click="auditClick(row)">审核</el-button>
          <el-button type="text" v-if="row.status === 2 || row.status === 5 || row.status === 7" @click="upOrDownClick(row)">申请上架</el-button>
          <el-button type="text" @click="editClick(row)">商铺信息补充</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.currentPage"
      layout="total, sizes, prev, pager, next, jumper"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>

    <ShopEdit ref="CreateShopEdit" @onOk="fetchData"></ShopEdit>
    <ShopUpdate ref="CreateShopUpdate" @onOk="fetchData"></ShopUpdate>
    <ShopDetail ref="CreateShopDetail" @onOk="fetchData"></ShopDetail>
    <ShopAudit ref="CreateShopAudit" @onOk="fetchData"></ShopAudit>

  </div>
</template>

<script>
import {
  Vue,
  ref,
  toRefs,
  shallowRef,
  reactive,
  watch,
  watchEffect,
  getCurrentInstance,
  computed,
  defineComponent,
  nextTick,
  inject,
  onMounted,
  onUnmounted,
} from 'vue'
import { Message,MessageBox } from 'element-ui'
import store from '@/store'
import ShopEdit from '@/components/VabMerchant/shopEdit'
import ShopUpdate from '@/components/VabMerchant/shopUpdate'
import ShopDetail from '@/components/VabMerchant/shopDetail'
import ShopAudit from '@/components/VabMerchant/shopAudit'
import GoodsList from '@/views/merchant/goods_list'
import {
  getMerchantPage,
  setMerchantShopUpOrDown
} from '@/api/merchant/shop_api'
export default {
  name: 'shopList',
  components: {
    ShopEdit,
    ShopUpdate,
    ShopDetail,
    ShopAudit,
    GoodsList
  },
  setup(props, { emit }) {
    const Interface = reactive({
      handleSizeChange(val) {
        query.queryForm.pageSize = val
        Interface.fetchData()
      },
      handleCurrentChange(val) {
        query.queryForm.currentPage = val
        Interface.fetchData()
      },
      async fetchData(){
        const {data} = await getMerchantPage(query.queryForm)
        if(data && Array.isArray(data.shops)){
          query.list = data.shops
          query.total = data.total
        }
      },
      initList(){
        Interface.fetchData()
      },
      formatstatus(row, column){
        if(!row.status)return;
        return query.shopStatusData.find(v=>v.value === row.status).label
      },
      formatSchoolID(row, column){
        return query.schoolData.find(v=>v.schoolId == row.schoolId).schoolName
      },
      statusClick(row){
        CreateShopUpdate.value.openForm(row)
      },
      auditClick(row){
        CreateShopAudit.value.openForm(row)
      },
      detailClick(row){
        CreateShopDetail.value.shopDetail(row)
      },
      editClick(row){
        let params = {type:7}
        store.dispatch('baseStore/setQiniuToken',params)
        CreateShopEdit.value.openForm(row)
      },
      upOrDownClick(item){
        MessageBox.confirm('确定申请上架', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          let params = {shopId:item.id}
          const {code} = await setMerchantShopUpOrDown(params)
          if(code === 0){
            Message.success('操作成功');
             Interface.fetchData()
          }
        }).catch(() => {});
      },
    })
    const query = reactive({
      shopStatusData: computed(() => store.getters['baseStore/shopStatusData']),
      schoolData:computed(() => store.getters['baseStore/schoolData']),
      userinfo:computed(() => store.getters['baseStore/userInfo']),
      list:[],
      total:0,
      queryForm: {
        pageSize:10,
        currentPage:1,
        status:'',
        schoolId:'',
        shopName:'',
      }
    })
    const CreateShopEdit = ref(null)
    const CreateShopUpdate = ref(null)
    const CreateShopDetail = ref(null)
    const CreateShopAudit = ref(null)
    onMounted(() => {
      Interface.initList()
    })
    return {
      CreateShopEdit,
      CreateShopUpdate,
      CreateShopDetail,
      CreateShopAudit,
      ...toRefs(query),
      ...toRefs(Interface)
    }
  }
} 
</script> 
 